<template>
	<div>
		<div class="biaoqian-wrap">
			<span class="biaoqian-my">个性标签</span>
			<div class="biaoqian-my-tab">
				<span v-for="(item,index) in list" :key="index" :class="{changes:index==num}"
					@click="bcg(index,item)">{{item.uname}}</span>
			</div>
		</div>
		<!-- 弹出框 -->
		<div>
			<van-dialog v-model="show" :title="titles">
				<img src="../../../../assets/popr/logo-npm.svg" />
			</van-dialog>
		</div>

		<!-- 步进器 -->
		<div class="bujinqi">
			<van-circle v-model="currentRates" :rate="rate" layer-color="#e5e5e5" :color="gradientColors" :text="text" size="150px"/>
			<van-circle v-model="currentRate" :rate="rates" :color="gradientColor" layer-color="#dcdcdc" size="150px"
				:text="texts" />
		</div>
	</div>
</template>

<script>
	import {
		Dialog,
		Circle
	} from 'vant';
	export default {
		data() {
			return {
				num: 0,
				rate: 60,
				rates: 75,
				currentRate: 50,
				currentRates: 80,
				text: "ps",
				texts: "office",
				titles: "",
				show: false,
				gradientColor: {
					'0%': '#ff0606',
					'100%': '#5500ff',
				},
				gradientColors: {
					'0%': '#08d2ff',
					'100%': '#ff08ff',
				},
				list: [{
						"uname": "吉他",
						"pic": "../../../../assets/popr/jita.svg"
					},
					{
						"uname": "网球王子",
						"pic": "../../../../assets/popr/wangqiu.svg"
					},
					{
						"uname": "二次元",
						"pic": "../../../../assets/popr/erciyuan.svg"
					},
					{
						"uname": "ig战队",
						"pic": "../../../../assets/popr/zhandui.svg"
					},
					{
						"uname": "宅男拯救世界",
						"pic": "../../../../assets/popr/shijie.svg"
					},
					{
						"uname": "K歌之王",
						"pic": "../../../../assets/popr/Kge.svg"
					},
					{
						"uname": "Switch",
						"pic": "../../../../assets/popr/Switch.svg"
					},
					{
						"uname": "轻音乐",
						"pic": "../../../../assets/popr/music.svg"
					},
					{
						"uname": "米粉",
						"pic": "../../../../assets/popr/xiaomi.svg"
					},
					{
						"uname": "IT民工",
						"pic": "../../../../assets/popr/diannao.svg"
					}
				]
			}
		},
		methods: {
			bcg(index, item) {
				this.num = index
				this.titles = item.uname
				this.show = true
			}
		},
		components: {
			[Dialog.Component.name]: Dialog.Component,
		},
	}
</script>

<style lang="scss">
	.biaoqian-wrap {
		padding: 16px;
		display: flex;
		flex-direction: column;

		.biaoqian-my {
			font-weight: bold;
			font-size: 20px;
			padding: 5px 0;
			box-sizing: border-box;
		}

		.biaoqian-my-tab {
			display: flex;
			flex-wrap: wrap;
			margin: 10px 0;

			span {
				border: 1px solid #b9b9b9;
				border-radius: 5px;
				padding: 6px 12px;
				margin: 5px 10px;
				box-sizing: border-box;
			}

		}
	}

	.changes {
		background-color: #2eacff;
		color: #ffffff;
	}

	img {
		padding: 10px 0;
		width: 100%;
		height: 180px;
	}
	
	.bujinqi{
		display: flex;
		justify-content: space-around;
	}
</style>
